<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>后台管理系统</title>
  </head>
  <body>
    <!-- 表格容器 -->
    <div class="layui-container" style="margin-top: 20px">
      <!-- 工具栏 -->
      <div class="layui-row">
        <button class="layui-btn layui-btn-normal" id="btn-add">
          <i class="layui-icon"></i> 新增
        </button>
      </div>

      <!-- 数据表格 -->
      <table id="dataTable" lay-filter="dataTable"></table>
    </div>

    <!-- 表格工具栏模板 -->
    <script type="text/html" id="toolbar">
      <a class="layui-btn layui-btn-xs" lay-event="detail">详情</a>
      <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
      <a class="layui-btn layui-btn-xs" lay-event="del">删除</a>
    </script>

    <!-- 弹窗表单模板 -->
    <div id="formWindow" style="display: none; padding: 20px">
      <form class="layui-form" lay-filter="dataForm">
        <input type="hidden" name="id" />
        <div class="layui-form-item">
          <label class="layui-form-label">姓名</label>
          <div class="layui-input-block">
            <input
              type="text"
              name="name"
              required
              lay-verify="required"
              class="layui-input"
            />
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">年龄</label>
          <div class="layui-input-block">
            <input
              type="number"
              name="age"
              required
              step="1"
              lay-verify="required"
              class="layui-input"
            />
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">性别</label>
          <div class="layui-input-block">
            <select name="sex" required lay-verify="required" id="sex">
              <option>男</option>
              <option>女</option>
            </select>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">地址</label>
          <div class="layui-input-block">
            <input
              type="text"
              name="address"
              required
              lay-verify="required"
              class="layui-input"
            />
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">电话</label>
          <div class="layui-input-block">
            <input
              type="number"
              name="phone"
              required
              step="1"
              lay-verify="required"
              class="layui-input"
            />
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">机构</label>
          <div class="layui-input-block">
            <select
              name="institutionId"
              required
              lay-verify="required"
              id="parentSelect"
            ></select>
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formSubmit">
              提交
            </button>
            <button type="reset" class="layui-btn layui-btn-primary">
              重置
            </button>
          </div>
        </div>
      </form>
    </div>

    <div id="detailFormWindow" style="display: none; padding: 20px">
      <form class="layui-form" lay-filter="detailDataForm">
        <input type="hidden" name="id" />
        <div class="layui-form-item">
          <label class="layui-form-label">姓名</label>
          <div class="layui-input-block">
            <input
              type="text"
              name="name"
              required
              lay-verify="required"
              class="layui-input"
              disabled
            />
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">性别</label>
          <div class="layui-input-block">
            <input
              type="text"
              name="sex"
              required
              lay-verify="required"
              class="layui-input"
              disabled
            />
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">年龄</label>
          <div class="layui-input-block">
            <input
              type="text"
              name="age"
              required
              lay-verify="required"
              class="layui-input"
              disabled
            />
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">地址</label>
          <div class="layui-input-block">
            <input
              type="text"
              name="address"
              required
              lay-verify="required"
              class="layui-input"
              disabled
            />
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">电话</label>
          <div class="layui-input-block">
            <input
              type="text"
              name="phone"
              required
              lay-verify="required"
              class="layui-input"
              disabled
            />
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">机构</label>
          <div class="layui-input-block">
            <input
              type="text"
              name="institutionName"
              required
              lay-verify="required"
              class="layui-input"
              disabled
            />
          </div>
        </div>
      </form>
    </div>

    <script>
      layui.use(["table", "layer", "form"], function () {
        const auths = checkLogin();

        var table = layui.table,
          layer = layui.layer,
          form = layui.form,
          $ = layui.$;

        table.render({
          elem: "#dataTable",
          url: baseUrl + "/emp/list",
          headers: { auth: auths },
          page: true,
          cols: [
            [
              { field: "name", title: "姓名", width: 80 },
              { field: "sex", title: "性别" },
              { field: "age", title: "年龄", sort: true },
              { field: "address", title: "地址" },
              { field: "phone", title: "电话" },
              { field: "institutionName", title: "机构" },
              {
                fixed: "right",
                title: "操作",
                toolbar: "#toolbar",
                width: 200,
              },
            ],
          ],
          parseData: function (res) {
            console.log(res.data);
            return {
              code: res.code, //解析接口状态
              msg: res.msg, //解析提示文本
              data: res.data, //解析数据列表
            };
          },
        });

        // 新增按钮事件[5](@ref)
        $("#btn-add").click(function () {
          layer.open({
            type: 1,
            title: "新增数据",
            area: ["800px", "600px"],
            content: $("#formWindow"),
            success: function () {
              form.val("dataForm", {
                // 清空表单
                id: "",
                name: "",
                parentId: "",
              });
            },
          });
        });

        // 表格工具条事件[3](@ref)
        table.on("tool(dataTable)", function (obj) {
          var data = obj.data;
          if (obj.event === "del") {
            layer.confirm("确认删除该记录？", function (index) {
              obj.del(); // 前端删除行

              layer.close(index);
              $.ajax({
                url: baseUrl + "/emp/delete/" + data.id,
                type: "GET",
                headers: { auth: auths },
                success: function (res) {
                  if (res.code == 0) {
                    layer.msg("删除成功", { icon: 1 });
                  }
                },
              });
            });
          } else if (obj.event === "edit") {
            layer.open({
              type: 1,
              title: "编辑数据",
              area: ["500px", "300px"],
              content: $("#formWindow"),
              success: function () {
                form.val("dataForm", data); // 填充数据
              },
            });
          } else if (obj.event === "detail") {
            layer.open({
              type: 1,
              title: "详情",
              area: ["500px", "300px"],
              content: $("#detailFormWindow"),
              success: function () {
                $.ajax({
                  url: baseUrl + "/emp/get/" + data.id,
                  type: "GET",
                  headers: { auth: auths },
                  success: function (res) {
                    form.val("detailDataForm", res.data); // 填充数据
                  },
                });
              },
            });
          }
        });

        // 表单提交事件[1,5](@ref)
        form.on("submit(formSubmit)", function (data) {
          var formData = data.field;

          // 此处应发起AJAX请求

          $.ajax({
            url: baseUrl + "/emp/saveOrUpdate",
            type: "POST",
            headers: { auth: auths },
            data: formData,
            success: function (res) {
              console.log(res);
            },
          });

          table.reload("dataTable");

          layer.msg("操作成功", { icon: 1 });
          layer.closeAll("page");
          return false;
        });

        $.ajax({
          url: baseUrl + "/ins/list",
          type: "GET",
          headers: { auth: auths },
          success: function (res) {
            var select = $("#parentSelect");
            let html = "";
            $.each(res.data, function (index, item) {
              html += `<option value='${item.id}'>${item.name}</option>`;
            });
            select.html(html);
            console.log(select.html());
            form.render();
          },
        });
      });
    </script>
  </body>
</html>
